<template>
<div class='container'>
    <!-- 标题 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()"></van-nav-bar>
    <!-- 搜索框 -->
    <van-search
     v-model="keyword"
     show-action
     shape="round"
     @input="hGetSuggestion_with_debounce"
     placeholder="请输入搜索关键词">
     <div slot="action" @click="hSearch">搜索</div>
    </van-search>
    <!-- 1.搜索建议 -->
    <van-cell-group v-if="keyword">
      <van-cell title="搜索建议" />
      <van-cell
      icon="search"
      v-for="(item, index) in cSuggestion" :key="index"
      @click="hSearchSuggestion(index)"
      >
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- 2.历史记录 -->
    <van-cell-group v-else >
      <van-cell title="历史记录" />
      <van-cell
      :title="item"
      v-for="(item, index) in history" :key="index"
      @click="$router.push('/search/result?keyword='+item)"
      >
        <van-icon name="close" @click.stop="hDeleteHistory(index)" />
      </van-cell>
    </van-cell-group>
</div>
</template>
<script>
import { getSuggestion } from '@/api/search.js'
// 引入持久化模块
import { setItem, getItem } from '@/utils/storage'
// 引入loadsh
import _ from 'lodash'
export default {
  name: 'page-search',
  data () {
    return {
      // 搜索关键字
      keyword: '',
      // 当前的搜索建议
      suggestios: [],
      //   历史记录
      history: getItem('searchHistory') || [] // 保存历史记录  ['正则', 'javascript']
    }
  },
  //   计算属性
  computed: {
    cSuggestion () {
      const reg = new RegExp(this.keyword, 'gi')
      const arr = this.suggestios.map(str => {
        return str.replace(reg, function (s) {
          return `<span style='color:red'>${s}</span>`
        })
      })
      return arr
    }
  },
  methods: {
    //   防抖和节流
    hGetSuggestion_with_debounce: _.debounce(function () {
      this.hGetSuggestion()
    }, 500),
    hGetSuggestion_with_throttle: _.throttle(function () {
      console.log(this.keyword)
      this.hGetSuggestion()
    }, 500),
    // 监听搜索框关键字变化
    async hGetSuggestion () {
      console.log(this.keywoord)
      // 判断 如果搜索关键字为空 return
      if (this.keyword === '') {
        this.suggestios = []
        return
      }
      // 调用接口 发送请求 根据搜索关键字  返回数据 渲染页面
      const res = await getSuggestion(this.keyword)
      console.log(res)
      this.suggestios = res.data.data.options
    },
    // 历史记录数据添加新项
    // 用来向搜索记录中添加新项
    // 搜索记录的基本规则
    // - 不能有重复的项
    // - 最近搜索记录应该放在最前面
    addHistory (str) {
      // 如果在history中已经存在，则可以先删除
      // findIndex如果找到了符合条件的元素，则下标不会是-1
      const idx = this.history.findIndex(item => item === str)
      //   找到  返回值就不等于-1
      if (idx !== -1) {
        //   有重复项 删除
        this.history.splice(idx, 1)
      }
      //    在数组的头部去添加
      this.history.unshift(str)
      //   做持久化
      setItem('searchHistory', this.history)
    },
    // 点击搜索按钮时候  添加历史记录
    hSearch () {
      if (this.keyword === '') return
      this.addHistory(this.keyword)
      // 点击搜索按钮  跳转到搜索结果页面
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 用户点击搜索建议
    hSearchSuggestion (index) {
      const keyword = this.suggestios[index]
      this.addHistory(keyword)
      // 跳转到搜索结果页面
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    //   删除历史记录
    hDeleteHistory (index) {
      // 删除数据
      this.history.splice(index, 1)
      //   做持久化
      setItem('searchHistory', this.history)
    }
  }

}
</script>
 <style lang='less' scoped>
</style>
